<template>
  <div>
    <div class="collapse-btn" @click="collapseChange">
    <i :class="tupiao" style="font-size:30px"></i>
    </div>
    <div class="logo">经济管理系统</div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      tupiao: 'el-icon-s-fold',
      collapse: false
    }
  },
  methods: {
    collapseChange: function () {
      console.log(11)
      this.collapse = !this.collapse
      if (this.tupiao === 'el-icon-s-unfold') {
        this.tupiao = 'el-icon-s-fold'
      } else {
        this.tupiao = 'el-icon-s-unfold'
      }
      console.log()
      this.$EventBus.$emit('collapse', this.collapse)
    }
  }
}
</script>
<style scoped>
.collapse-btn{
  float: left;
  cursor: pointer;
  padding: 0px 30px 0px 5px;
  line-height: 70px;
}
.header .logo {
  float: left;
  width: 250px;
  font-family: 26px;
  line-height: 70px;
}
</style>
